<template>
  <basePage :show-tabbar="true" :page-params="pageParams">
    <view class="shopCar">
      <view class="flexCenter choiceCity">
        <view v-if="!vuex_cityInfo_shopCarClick" class="activeCity" @click="chioseRegion">
          <u-icon name="map" color="#FF5533" size="20" />
          <text style="margin-left: 5rpx">{{ Address }}</text>
        </view>
        <view v-else class="activeCity">
          <u-icon name="map" color="#FF5533" size="20" />
          <view> {{ vuex_cityInfo_shopCar.cityName }}</view>
        </view>
        <!-- <view v-if="editFlag" @click="editShopCar">编辑</view>
        <view v-if="editFlag == false" @click="editShopCar">完成</view> -->
        <view @click="changeAddress">切换</view>
      </view>
      <view v-if="couponsList.length > 0" class="flexCenter getCoupon" @click="couponShow = true">
        <view class="flexCenter"><image :src="vuex_imgPath+'/coupon.png'" />领取优惠券</view>
        <u-icon name="arrow-right" size="18" color="#FF5533" />
      </view>
      <view v-if="shopCarList.length == 0 &&abnormalProducts.length == 0" class="noShop">
        <image v-if="vuex_imgPath" :src="vuex_imgPath+'/noshop.png'" />
        <text>暂无可结算的商品</text>
      </view>
      <view v-for="(item, index) in shopCarList" v-else :key="index" class="content">
        <view v-if="!!item.promotionText" class="flexCenter reduceTitle">
          <text v-if="item.activityType == 10" class="t-icon t-icon-tejia_tongyong_1" />
          <text v-else class="t-icon t-icon-manjian_tongyong_1" />
          {{ item.promotionText[0] }}
        </view>
        <view v-for="result in item.shoppingCartList" :key="result.id">
          <uni-swipe-action>
            <uni-swipe-action-item :right-options="swipeOptions" @click="handleDeleteGoods($event,result)">
              <view class="shop">
                <view class="shopInfoTop">
                  <view class="flexCenter shopImg">
                    <view
                      :class="(result.selectedStatus == 10 && editFlag) || (selectId.includes(result.id) && !editFlag)? 'flexCenter checked checkedAcitve' : 'flexCenter checked'"
                      @click="changeSelect(result)"
                    >
                      <u-icon v-if="(result.selectedStatus == 10 && editFlag) || (selectId.includes(result.id) && !editFlag)" name="checkmark" color="#FFFFFF" size="10" />
                    </view>
                    <view class="product-img-wrap">
                      <image :src="result.productImg" @click="goShopDetail(result)" />
                      <view v-if="result.categoryProductType == 1" class="danger_icon">&#xe650;</view>
                    </view>
                    <view class="shopInfo">
                      <view class="shopName">{{ result.productName }}</view>
                      <view class="flexCenter shopCode">编码：{{ result.sku_code }}</view>
                      <view class="flexCenter shopCode">
                        <text v-if="result.productCount <= result.actual_stock" class="t-icon t-icon-xianhuo_tongyong_1" />
                        预计出货日：{{ result.numCycle }}
                      </view>
                      <view class="flexCenter shopPrice">
                        <view class="price">￥<text>{{ (Number(result.salePrice) - Number(result.reducePrice)).toFixed(2) }}</text>/{{ result.unit }}</view>
                        <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
                        <u-number-box
                          slot="right-icon"
                          :value="result.productCount"
                          :step="result.orderLimitType == '0' ? Math.ceil(result.miniOrder) : 1"
                          input-width="50"
                          :color="color"
                          :min="Math.ceil(result.miniOrder)"
                          :is-spot="result.isSpot"
                          :button-size="buttonSize"
                          :bg-color="bgColor"
                          @minusReduce="minusReduce($event, result.id)"
                          @plusAdd="plusAdd($event, result.id)"
                          @blur="changeNum($event, result.id)"
                        />
                        <!-- #endif -->
                        <!-- #ifdef H5 -->
                        <u-number-box
                          :value="result.productCount"
                          :step="result.orderLimitType == '0' ? Math.ceil(result.miniOrder) : 1"
                          input-width="50"
                          :color="color"
                          :min="Math.ceil(result.miniOrder)"
                          :is-spot="result.isSpot"
                          :button-size="buttonSize"
                          :bg-color="bgColor"
                          @minusReduce="minusReduce($event, result.id)"
                          @plusAdd="plusAdd($event, result.id)"
                          @blur="changeNum($event, result.id)"
                        />
                        <!-- #endif -->
                      </view>
                    </view>
                  </view>

                </view>
                <view v-if="result.promotionProductTag == 10" class="flexCenter promo" @click="chioceShowFn(result)">
                  <text class="t-icon t-icon-cuxiao_tongyong_1" />
                  <view class="activeTitle">{{ result.activeTitle }}</view>
                  <u-icon name="arrow-right" size="18" color="#FF5533" />
                </view>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
      </view>
      <view class="content">
        <view v-for="(result, resultIndex) in abnormalProducts" :key="resultIndex" class="shop">
          <uni-swipe-action>
            <uni-swipe-action-item :right-options="swipeOptions" @click="handleDeleteGoods($event,result)">
              <view class="shopInfoTop">
                <view class="flexCenter shopImg">
                  <view class="invalidShop">已失效</view>
                  <image :src="result.productImg" />
                </view>
                <view class="shopInfo">
                  <view class="shopName">{{ result.productName }}</view>
                  <view class="flexCenter shopCode">编码：{{ result.sku_code }}</view>
                  <view class="flexCenter shopPrice">
                    <view class="price">￥<text>{{ Number(result.salePrice).toFixed(2) }}</text>/{{ result.unit }}</view>
                    <view />
                  </view>
                </view>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
      </view>
      <view class="shopCarFootFaker" :style="{'height': newTab ? '' : '160rpx'}" />
      <view class="shopCarFoot" :style="{'bottom' : newTab ? BottomHeight : '0rpx','height': newTab ? '' : '140rpx', 'paddingBottom': newTab ? '' : '60rpx'}">
        <view class="flexCenter" @click="allchange">
          <view :class="((allSelect && editFlag) || (allSelectFlag && !editFlag)) ? 'flexCenter checked checkedAcitve' : 'flexCenter checked'">
            <u-icon v-if="((allSelect && editFlag) || (allSelectFlag && !editFlag))" name="checkmark" color="#FFFFFF" size="10" />
          </view>全选
        </view>
        <view v-if="editFlag" class="flexCenter">
          <view class="allPrice">合计：<text style="font-size: 28rpx;">￥{{ Number(shopCarInfo.selectedTotalPrice).toFixed(2) || 0 }}</text></view>
          <view class="allPrice">优惠减：<text style="font-size: 28rpx;">￥{{ shopCarInfo.reduceTotalPrice || 0 }}</text></view>
          <view class="flexCenter Button" @click="goConfrim">结算</view>
        </view>
        <view v-if="editFlag == false" class="delete">
          <view class="CollRight" @click="CollectionShop">移入收藏夹</view>
          <view @click="deleteCar">删除</view>
        </view>
      </view>
      <u-popup :show="couponShow" :round="10" mode="bottom">
        <view class="flexCenter title">
          领取优惠券
          <image src="../../static/shopIcon/close.png" @click="closeFn" />
        </view>
        <view class="popupContent" style="max-height: 800rpx;overflow-y: auto;padding-top: 0rpx">
          <view v-for="(item, index) in couponsList" :key="index" style="padding-top: 24rpx;box-sizing:border-box;">
            <coupon :coupon-obj="item" @reload="reload" />
          </view>
        </view>
      </u-popup>
      <u-popup :show="chioceShow" :round="10" mode="bottom">
        <view class="flexCenter title">
          更换促销
          <image src="../../static/shopIcon/close.png" @click="closeFn" />
        </view>
        <view class="popupContent">
          <view v-for="(item, index) in activeList" :key="index" class="flexCenter choiceVal" @click="changeSelect(item, 'activi')">
            {{ item.label }}
            <view :class="item.value == changeShopObj.activityParticipate ? 'flexCenter checked checkedAcitve' : 'flexCenter checked'">
              <u-icon v-if="item.value == changeShopObj.activityParticipate" name="checkmark" color="#FFFFFF" size="10" />
            </view>
          </view>
        </view>
      </u-popup>
      <u-modal width="540rpx" :show="confrimFlag" :async-close="true" confirm-color="#FF5533" :show-cancel-button="true" @confirm="confirm" @cancel="cancel">
        <view>确定要删除选中商品吗？</view>
      </u-modal>
    </view>
  </basePage>
</template>

<script>
import { getShopCarList, changeCarNum, changeSelect, deleteCar, CollectionShops } from '@/api/shopCar';
import { CollectionShop, getCoupons } from '@/api/shopDetail'
import coupon from '@/components/coupon'
import { tdkUrl } from '@/common/common';
import basePage from '@/components/base-page'
export default {
  components: {
    coupon,
    basePage
  },
  props: {
    tab: {
      type: Boolean,
      default: false
    },
    shippingAddressModel: {
      type: Object,
      default: null
    }
  },
  // #ifdef MP-WEIXIN
  options: {
    styleIsolation: 'shared' // 小程序配置 - 解除样式隔离
  },
  // #endif
  data() {
    return {
      color: '#323233',
      buttonSize: 30,
      bgColor: '#F5F5F5',
      newTab: this.tab,
      editFlag: true, // 编辑完成显示
      shopCarList: [],
      platformType: '',
      shopCarInfo: {},
      allSelect: false,
      allUseList: [], // 全部可购买的商品
      couponShow: false, // 优惠券弹框
      chioceShow: false, // 选择促销弹框
      promoList: [],
      selectId: [], // 编辑时选中的id集合
      confrimFlag: false, // 删除确认confirm
      changeShopObj: { // 选中促销时。当前商品信息
        activityParticipate: 10, // 是否参与促销活动  10是， 20不是
      },
      activeList: [],
      allSelectFlag: false, //全选flag
      abnormalProducts: [], //失效商品
      allCarShop: [], // 所有商品，包含可用和失效
      couponsList: [], // 优惠券列表
      swipeOptions: [
        {
          text: '移入收藏',
          style: {
            backgroundColor: '#E5A117',
            marginTop: '1rpx',
            marginRight: '1rpx',
            zIndex: -1
          }
        },
        {
          text: '删除',
          style: {
            backgroundColor: '#E51728',
            marginTop: '1rpx',
            marginRight: '1rpx',
            zIndex: -1
          }
        }

      ],
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
    }
  },
  computed: {
    Address() {
      return this.vuex_nowAddress.name
    },
    BottomHeight() {
      return this.vuex_systemInfo[1].system.includes('Android') ? '50px' : '67px'
    }
  },
  watch: {
    tab(newVal, oldVal) {
      if (newVal !== oldVal) this.newTab = newVal
    },
    Address(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getPlat()
        this.getShopCarList()
      }
    },
  },
  mounted() {
    this.getPlat()
    this.getShopCarList()
  },
  methods: {
    changeAddress() {
      uni.navigateTo({
        url: `/purchaseOrder/shopAddress/index?type=order&id=${!this.vuex_cityInfo_shopCarClick ? '' : this.vuex_cityInfo_shopCar.ship_add_id}`
      })
    },
    goShopDetail(item) {
      console.log('wwwww', item)
      // #ifdef MP-ALIPAY || MP-WEIXIN
      uni.navigateTo({
        url: '/shopDetail/index?spuCode=' + item.spuCode
      })
      // #endif
      // #ifdef H5
      window.location.href = `${tdkUrl.develop}/productsku/${item.sku_code}.html?page=1`
    // #endif
    },
    minusReduce(val, id) {
      this.changeCarNum(val, id)
    },
    plusAdd(val, id) {
      this.changeCarNum(val, id)
    },
    reload() { // 立即领取后调用
      this.getCoupons()
    },
    goConfrim() { // 确认订单
      if (this.allUseList.every((item) => item.selectedStatus !== 10)) {
        return this.$u.toast('请先勾选商品')
      }
      uni.navigateTo({
        url: '/ycPayments/confirmOrders/index'
      })
    },
    async CollectionShop(id, type, swipskuCode) { // 收藏
      const { memberId } = this.vuex_accountInfo
      var params = {
        member_id: memberId,
        source: '40',
        platformType: this.platformType,
        appletType: 'applet'
      }
      if (!this.vuex_cityInfo_shopCarClick) {
        const { warehouseCode, cityCode } = this.vuex_cityInfo
        params.cityId = cityCode
        params.warehouseId = warehouseCode
      } else {
        const { warehouseCode, cityCode } = this.vuex_cityInfo_shopCar
        params.cityId = cityCode
        params.warehouseId = warehouseCode
      }

      if (!type) {
        if (this.selectId.length == 0) {
          return this.$u.toast('请先勾选商品')
        }
        var skuCode = this.allCarShop.reduce((arr, item) => {
          if (this.selectId.includes(item.id)) {
            arr.push(item.sku_code)
          }
          return arr
        }, [])
        params.skuCode = skuCode.join(',')
        params.skuCodes = skuCode.join(',')
      } else {
        params.skuCode = [swipskuCode].join(',')
        params.skuCodes = [swipskuCode].join(',')
        this.allCarShop.length = 1 // 走收藏不走批量收藏接口
      }
      if (this.allCarShop.length == 0) return this.$u.toast('请先勾选商品')
      const res = this.allCarShop.length == 1 ? await CollectionShop(params) : await CollectionShops(params)
      if (res.errorCode == 1) {
        this.$u.toast('收藏成功')
        this.selectId = []
        const params = { cartIds: id }
        deleteCar(params).then((res) => {
          if (res.code == '0') {
            this.getShopCarList()
          }
        })
      } else {
        this.$u.toast(res.errorMessage)
      }
    },
    cancel() {
      this.confrimFlag = false
    },
    async confirm() { // 删除购物车商品
      const params = {
        cartIds: this.selectId.join(',')
      }
      const tips = () => {
        this.$u.toast('删除成功')
        this.confrimFlag = false
        this.selectId = []
      }
      const res = await deleteCar(params)
      if (res.code == 0) {
        this.getShopCarList(tips)
      }
    },
    deleteCar() {
      if (this.selectId.length == 0) {
        return this.$u.toast('请先勾选商品')
      }
      this.confrimFlag = true
    },
    getCoupons(callback) { // 获取优惠券
      const { accountType, memberId } = this.vuex_memberInfo
      const params = {
        skuCodes: this.allUseList.map((item) => item.sku_code),
        // skuCodes: ['12492413'],
        member_id: memberId,
        account_type: accountType
      }
      getCoupons(params).then((res) => {
        if (res.code == '0') {
          this.couponsList = res.coupons.filter((item) => {
            return item.couponUseStatus == 0
          })
          callback && callback()
        }
      })
    },
    chioceShowFn(e) {
      this.changeShopObj = e
      this.chioceShow = true
      this.activeList = e.activeList
    },
    closeFn() {
      this.couponShow = false
      this.chioceShow = false
    },
    async changeSelect(e, type = '') { // 修改选中状态, 促销同用该方法
      const { accountType, memberId } = this.vuex_memberInfo
      const params = {
        memberId,
        accountType,
        updateCartList: [ // activi 判断当前事件执行的位置是不是选中促销
          {
            cartId: type == 'activi' ? this.changeShopObj.id : e.id,
            activityParticipate: type == 'activi' ? e.value : e.activityParticipate,
            selectedStatus: type == 'activi' ? this.changeShopObj.selectedStatus : (e.selectedStatus == 10 ? 20 : 10)// 取反值
          }
        ]
      }
      const remove = (arr, val) => {
        var index = arr.indexOf(val);
        if (index > -1) {
          arr.splice(index, 1);
        }
        return arr
      }
      if (this.editFlag) { // 为true时是结算页面
        const res = await changeSelect(params)
        if (res.code == 0) {
          this.chioceShow = false
          this.getShopCarList()
        }
      } else { // false为编辑模式
        if (this.selectId.includes(e.id)) {
          remove(this.selectId, e.id)
          this.allSelectFlag = false
        } else {
          this.selectId.push(e.id)
          this.allSelectFlag = this.selectId.length == this.allUseList.length
        }
      }
    },
    async changeCarNum(productCount, cartId) { // 数量改变时
      const params = { cartId, productCount }
      const res = await changeCarNum(params)
      if (res.code == 0) {
        this.getShopCarList()
      }
    },
    editShopCar() {
      this.selectId = []
      this.editFlag = !this.editFlag
    },
    async allchange() { // 全选操作
      const { accountType, memberId } = this.vuex_memberInfo
      var updateCartList = this.allUseList.map((item) => {
        return { cartId: item.id, activityParticipate: item.activityParticipate, selectedStatus: this.allSelect ? 20 : 10 }
      })
      const params = { memberId, accountType, updateCartList }
      if (this.editFlag) { // 为true时是结算页面
        const res = await changeSelect(params)
        if (res.code == 0) {
          this.getShopCarList()
        }
      } else { // false为编辑模式
        if (!this.allSelectFlag) {
          this.allSelectFlag = true
          this.selectId = this.allCarShop.map((item) => item.id)
        } else {
          this.allSelectFlag = false
          this.selectId = []
        }
      }
    },
    getPlat() {
      const { accountType = 20 } = this.vuex_memberInfo || {}
      switch (accountType) { //  账户类型：10:签约用户；20:普通用户;30认证用户;39普通会员-分销;40分销用户；
        case 10:
          this.platformType = 1
          break
        case 20:
          this.platformType = 2
          break
        case 30:
          this.platformType = 2
          break
        case 39:
          this.platformType = 3
          break
        case 40:
          this.platformType = 3
          break
        default:
          this.platformType = 2
          break
      }
    },
    chioseRegion() {
      uni.navigateTo({ url: '/shopIndex/region' })
    },
    changeNum(e, id) {
      if (e.value == '') {
        this.changeCarNum(1, id)
        return
      }
      this.changeCarNum(e.value, id)
    },
    getShopCarList(callback) {
      const { accountType, memberId, mainCustomerId } = this.vuex_memberInfo
      const params = {
        memberId,
        platformType: this.platformType,
        accountType,
        mainCustomerId,
        version_code: 10000,
        isMiniOrderStatus: 20, //是否使用最小起订量  10:是 20：否
      }
      if (!this.vuex_cityInfo_shopCarClick) {
        const { warehouseCode, cityCode, provinceCode } = this.vuex_cityInfo
        params.cityId = cityCode
        params.warehouseId = warehouseCode
        params.curSiteCode = provinceCode
      } else {
        const { warehouseCode, cityCode, provinceCode } = this.vuex_cityInfo_shopCar
        params.cityId = cityCode
        params.warehouseId = warehouseCode
        params.curSiteCode = provinceCode
      }

      getShopCarList(params).then((res) => {
        if (res.code == '0') {
          var promotionProducts = res.promotionProducts ? res.promotionProducts : []
          var abnormalProducts = res.abnormalProducts ? res.abnormalProducts : []
          console.log(this.shopCarList.length, this.abnormalProducts.length, 11111111111)
          this.shopCarList = promotionProducts.map((item) => {
            var shoppingCartList = item.shoppingCartList.map((result) => {
              const {
                activityParticipate, // 促销活动10是，20否
                unit, // 单位
                promotionNum,
                alreadyPurchaseNum,
                activityType,
                arrivalCycle, // 预计出货日
                actual_stock, // 商品库存
                productCount // 购物车数量
              } = result[0]
              var Cycle = productCount > actual_stock ? Number(arrivalCycle) + 1 : 1 // 如果输入的数量大于库存数，预计出货日自动加一。反之不变
              result[0].numCycle = Cycle >= 30 ? 30 : Cycle >= 10 ? 10 : Cycle // 重新定义出货日
              result[0].activeList = [
                { label: '参与促销', value: 10 },
                { label: '不参与促销', value: 20 }
              ]
              if (activityParticipate == 10) { // 选择促销活动后
                if (promotionNum !== 0) {
                  result[0].activeTitle = `前1-${promotionNum}${unit}享受活动价格`
                  result[0].activeList[0] = { label: `前1-${promotionNum}${unit}享受活动价格`, value: 10 }
                } else {
                  result[0].activeTitle = `活动期间，购买数量均享受活动价格`
                  result[0].activeList[0] = { label: `活动期间，购买数量均享受活动价格`, value: 10 }
                }
                if (promotionNum !== 0 && alreadyPurchaseNum > 0) {
                  result[0].activeTitle = `前1-${promotionNum}${unit}享受活动价格`
                  result[0].activeList[0] = { label: `前1-${promotionNum}${unit}享受活动价格`, value: 10 }
                }
                if (activityType == 20) {
                  result[0].activeTitle = result[0].promotionRule
                  result[0].activeList[0] = { label: `${result[0].promotionRule}`, value: 10 }
                }
              } else if (activityParticipate == 20) { // 默认不参与促销活动后
                result[0].activeTitle = `不参与促销`
              }
              result[0].isSpot = !!result[0].productCount.toString().includes('.') // 如果商品数量包含小数点，则数量输入框支持输入小数点，如果支持小数数量购买，这个逻辑判断是错误的，商品详情是可以修改要购买的数量的，小数判断参考pc端，整数数量购买向上取整
              return result[0]
            })
            return { ...item, shoppingCartList }
          })
          this.abnormalProducts = abnormalProducts.map((abnormal) => {
            return abnormal[0]
          })
          // 获取所有可正常购买用商品
          this.allUseList = promotionProducts.reduce((arr, item) => {
            var smallList = item.shoppingCartList.map((result) => result[0])
            var list = arr.concat(smallList)
            return list
          }, [])
          this.allCarShop = [...this.abnormalProducts, ...this.allUseList]
          // 选中状态
          this.allSelect = this.allUseList.length > 0 ? this.allUseList.every((item) => item.selectedStatus == 10) : false
          this.shopCarInfo = res
          this.getCoupons(callback)
        }
      })
    },
    // 删除商品
    async handleDeleteGoods(e, goodsInfo) {
      const params = { cartIds: goodsInfo.id }
      if (e.content.text == '删除') {
        const res = await deleteCar(params)
        if (res.code == 0) {
          this.getShopCarList(() => {
            this.$u.toast('删除成功')
          })
        }
      }
      if (e.content.text == '移入收藏') {
        this.CollectionShop(goodsInfo.id, 'swipeAction', goodsInfo.sku_code)
      }
    },
  }
}
</script>
<style scoped lang="scss">
.flexCenter {
  align-items: center;
  align-content: center;
  display: flex;
}
//#ifdef MP-WEIXIN
/deep/.u-number-box__input {
  width: 50px !important;
}
// #endif
// #ifdef MP-ALIPAY
/deep/.u-number-box__input {
  width: 30px;
}
// #endif

.shopCar {
  .choiceVal {
    justify-content: space-between;
    font-weight: 400;
    padding: 16rpx 0rpx;
    box-sizing: border-box;
    color:$uni-text-color-orange;
    font-size: $uni-font-size-base;
  }
  .title {
    width: 100%;
    height: 88rpx;
    padding: 0rpx 32rpx;
    box-sizing: border-box;
    justify-content: space-between;
    font-weight: 700;
    border-bottom: 2rpx solid $uni-border-gray;
    color: $uni-text-color;
    font-size: $uni-font-size-base;
    image {
      height: 48rpx;
      width: 48rpx;
    }
  }
  .checked {
    width: 32rpx;
    height: 32rpx;
    justify-content: center;
    transform: rotateZ(360deg);
    border: 2rpx solid #D3D3D3;
    margin-right: 12rpx;
    border-radius: $uni-border-radius-circle;
  }
  .checkedAcitve {
    background: $uni-bg-color-orange;
    border: 2rpx solid #FF5533;
  }
  .activeCity {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    font-weight: 400;
    color: $uni-text-color-orange;
    font-size: $uni-font-size-base;
  }
  .getCoupon {
    width: 686rpx;
    margin: 0 auto;
    margin-top: 14rpx;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
    background: linear-gradient(135.2deg, rgba(255,229,203,1) 0%, rgba(255,213,205,1) 100%);
    box-shadow: inset 0 0 16px 0 rgba(255,251,244,1);
    font-weight: 400;
    justify-content: space-between;
    border-radius: $uni-border-radius-default;
    color: $uni-text-color-orange;
    font-size: $uni-font-size-base;
    image {
      width: 48rpx;
      height: 48rpx;
      margin-right: 16rpx;
    }
  }
  .noShop {
    text-align: center;
    font-weight: 400;
    padding-top: 206rpx;
    box-sizing: border-box;
    color: $uni-text-color-grey;
    font-size: $uni-font-size-base;
    image {
      width: 168rpx;
      height: 244rpx;
      display: block;
      margin: 0 auto;
      margin-bottom: 22rpx;
    }
  }
  .choiceCity {
    height: 64rpx;
    justify-content: space-between;
    padding: 14rpx 32rpx;
    box-sizing: border-box;
    font-weight: 400;
    color: #808080;
    position: fixed;
    width: 100%;
    z-index: 9;
    /* #ifdef MP-WEIXIN || MP-ALIPAY */
    top: 88rpx;
    /* #endif */
    /* #ifdef H5 */
    top:176rpx;
    /* #endif */
    background: $uni-bg-color;
    font-size: $uni-font-size-base;
  }
  .shop {
    padding: 16rpx;
    width: 100%;
    box-sizing: border-box;
    background: $uni-bg-color;
    border-radius: $uni-border-radius-default;
    border-top: 2rpx solid $uni-border-gray;
    .promo {
      justify-content: flex-start;
      color: $uni-text-color-orange;
      font-size: $uni-font-size-sm;
      font-weight: 400;
      padding-top: 22rpx;
      padding-bottom: 8rpx;
      box-sizing: border-box;
      margin-left: 264rpx;
      .t-icon {
        width: 64rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
      .activeTitle {
        width: 265rpx;
        }
    }
  }
  .shopInfoTop {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
  }
  .shopImg {
    justify-content: space-between;
    position: relative;
    image {
      width: 190rpx;
      height: 190rpx;
    }
    .invalidShop {
      width: 130rpx;
      height: 130rpx;
      background: rgba(0,0,0,0.6);
      position: absolute;
      z-index: 1;
      border-radius: $uni-border-radius-circle;
      color: $uni-text-color-inverse;
      font-size: $uni-font-size-sm;
      font-weight: 400;
      text-align: center;
      line-height: 130rpx;
      right: 30rpx;
    }
  }
  .popupContent {
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    padding-bottom: 68rpx;
  }
  .content {
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    padding-bottom: 0rpx;
    .reduceTitle {
      color: #808080;
      font-size: $uni-font-size-sm;
      font-weight: 400;
      background:$uni-bg-color;
      padding: 14rpx 48rpx;
      box-sizing: border-box;
      justify-content: flex-start;
      image {
        width: 64rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
      .t-icon{
        width: 64rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
  }
  .shopInfo {
    width: 400rpx;
    .shopName {
      font-size: $uni-font-size-sm;
      font-weight: 400;
      line-height: 36rpx;
      color: $uni-text-color;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      -webkit-line-clamp: 2;
    }
    .shopCode {
      color: $uni-text-color-tips;
      font-size: $uni-font-size-sm;
      font-weight: 400;
      margin-top: 12rpx;
      justify-content: flex-start;
      .t-icon {
        width: 56rpx;
        height: 32rpx;
        margin-right: 5rpx;
      }
    }
    .shopPrice {
      justify-content: space-between;
      margin-top: 20rpx;
      .price {
        color: $uni-text-color-orange;
        font-size: $uni-font-size-sm;
        font-weight: 400;
        text {
          font-weight: 700;
          font-size: $uni-font-size-lg;
        }
      }
    }
    .input {
      width: 96rpx;
      height: 44rpx;
      justify-content: center;
      border: 1px solid #d3d3d3;
      border-radius: $uni-border-radius-default;
      margin: 0rpx 8rpx;
    }
    .plus {
      width: 44rpx;
      height: 44rpx;
      border-radius: $uni-border-radius-default;
      justify-content: center;
      border: 1px solid #d3d3d3;
    }
  }
  .shopCarFootFaker {
    width: 100%;
    height: 112rpx;
  }
  .shopCarFoot {
    width: 100%;
    height: 92rpx;
    padding: 18rpx 32rpx;
    background: $uni-bg-color;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    position: fixed;
    bottom: 0;
    z-index: 9;
    border-bottom: 2rpx solid #f5f5f5;
    .allPrice {
      color: #666666;
      font-size: $uni-font-size-sm;
      font-weight: 400;
      margin-right: 32rpx;
      text {
        color: $uni-text-color-orange;
        font-weight: 700;
      }
    }
    .Button {
      width: 220rpx;
      height: 56rpx;
      font-weight: 400;
      justify-content: center;
      background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
      border-radius: $uni-border-radius-default;
      font-size: $uni-font-size-base;
      color:$uni-text-color-inverse;
    }
    .delete {
      display: flex;
      color: $uni-text-color-orange;
      font-size: $uni-font-size-base;
      font-weight: 400;
      .CollRight {
        margin-right: 72rpx;
      }
    }
  }
}
.product-img-wrap {
  position: relative;
  .danger_icon {
    position: absolute;
    font-family: 'xfs_iconfont' !important;
    font-size: $uni-font-size-lg;
    color: #d23433;
    bottom: 4rpx;
    right: 4rpx;
  }
}
/deep/ .u-swipe-action-item__content {
  z-index: 0;
}
.shopCar{
  padding-top: 160rpx;
}
</style>
